<template>
  <div>
    <el-container>
      <el-aside width="240px">
        <el-menu class="el-menu-vertical-demo">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-cloudy el-submenu1"></i>
              <span class="el-submenu1">信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item @click="setComponent('myself')" class="el-submenu2"
                >个人信息</el-menu-item
              >
              <el-menu-item @click="setComponent('myAnno')" class="el-submenu2"
                >我的公告</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-shopping-cart-full el-submenu1"></i>
              <span class="el-submenu1">订单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item @click="setComponent('myOrder')" class="el-submenu2"
                >我的订单</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-notebook-1 el-submenu1"></i>
              <span class="el-submenu1">课程管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                @click="setComponent('myCollect')"
                class="el-submenu2"
                >我的收藏</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <div>
         <i v-if="this.flagPage == 'myself' ">
            <my-self></my-self>
         </i>
          <i v-if="this.flagPage == 'myInfo'">
            <my-info></my-info>
          </i>
          <i v-if="this.flagPage == 'myOrder'">
            <my-order></my-order>
          </i>
          <i v-if="this.flagPage == 'myCourse'">
            <my-course></my-course>
          </i>
          <i v-if="this.flagPage == 'myCollect'">
            <my-collect></my-collect>
          </i>
        </div>
      </el-container>
    </el-container>
  </div>
</template>
<script>
// 组件绑定
import Vue from "vue";
import MyCollect from "~/pages/my/collect/myCollect.vue";
import MyCourse from "~/pages/my/course/myCourse.vue";
import MyInfo from "~/pages/my/info/myInfo.vue";
import MyOrder from "~/pages/my/order/myOrder.vue";
import MySelf from "~/pages/my/info/myself.vue"
Vue.component("my-collect", MyCollect);
Vue.component("my-course", MyCourse);
Vue.component("my-info", MyInfo);
Vue.component("my-order", MyOrder);
Vue.component("my-self",MySelf)

export default {
  data() {
    return {
      flagPage: "myself",
    };
  },
  methods: {
    setComponent(path) {
      switch (path) {
        case "myself":
          this.flagPage = "myself";
          break;
        case "myAnno":
          this.flagPage = "myInfo";
          break;
        case "myOrder":
          this.flagPage = "myOrder";
          break;
        case "myCourse":
          this.flagPage = "myCourse";
          break;
        case "myCollect":
          this.flagPage = "myCollect";
          break;
      }
    },
  },
};
</script>

<style scoped>
.el-submenu1 {
  font-size: 20px;
  color: black;
}
.el-submenu2 {
  font-size: 17px;
  color: black;
}
</style>
